<template>
  <div>
    <el-card>
      <Bread second="文章列表"></Bread>
      <!-- 头部筛选部分 -->
      <div class="headerBox">
        <el-form :inline="true" :model="q" class="demo-form-inline">
          <el-form-item label="文章分类">
            <el-select v-model="q.cate_id" placeholder="请选择文章分类">
              <!--select  显示是：label   获取的是value     =》id值-->
              <!-- 循环将获取到的数据渲染到下拉列表框 -->
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :label="item.cate_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select v-model="q.state" placeholder="请选择发布状态">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="default" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="pubArticle">发布文章</el-button>
      </div>
      <!-- 头部筛选部分 -->
      <!-- 数据表格部分 -->
      <!-- 文章分类列表 -->
      <el-table :data="artList" style="width: 100%" border>
        <el-table-column label="文章标题" prop="title" width="180">
          <template v-slot="{ row }">
            <el-link @click="showInfo(row.id)">
              {{ row.title }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cate_name" label="分类" width="180">
        </el-table-column>
        <el-table-column prop="pub_date" label="发布时间">
          <template v-slot="{ row }">
            {{ row.pub_date | format }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- 删除列表 -->
            <el-button type="danger" @click="delArtFn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据表格部分 -->
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.pagenum"
        :page-sizes="[2, 4, 6, 8, 10]"
        :page-size="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 分页 -->
    </el-card>
    <!-- 文章详情对话框 -->
    <el-dialog
      title="文章预览"
      :visible.sync="ArtInfoFormVisible"
      class="preview"
    >
      <art-info :infoData="infoData"></art-info>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ArtInfoFormVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 文章详情对话框 -->

    <!-- 发布文章 -->
    <el-dialog
      title="发布文章"
      :visible.sync="artPubFormVisible"
      fullscreen
      class="pubArtForm"
      destroy-on-close
    >
      <Artpub @closePubDia="closePubDiaFn"></Artpub>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 发布文章 -->
  </div>
</template>

<script>
import Bread from '../../components/Bread.vue'
// 导入api请求文章列表函数
import {
  getArticleListApi,
  getArtInfoApi,
  delArticleListApi
} from '../../api/art'
import { mapState } from 'vuex'
// 导入文章详情组件
import ArtInfo from './component/ArtInfo.vue'
// 导入发布文章组件
import Artpub from './component/Artpub.vue'
export default {
  components: { Bread, ArtInfo, Artpub },
  name: '',
  data () {
    return {
      /* 分页步骤
      1.先显示结构
      2.更改组件上的配置选项
      3.事件中处理函数获取新的数据
      */
      // 查询参数q
      q: {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
      },
      // 文章列表的数组
      artList: [],
      total: 0,
      // 文章详情对话框  默认不可见
      ArtInfoFormVisible: false,
      infoData: [],
      // 发布文章
      artPubFormVisible: false
    }
  },
  created () {
    this.initArtList()
  },
  computed: {
    ...mapState('art', ['cateList'])
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.q.pagesize = val
      this.initArtList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.q.pagenum = val
      this.initArtList()
    },
    // 查询按钮
    onSearch () {
      this.initArtList()
    },
    // 重置
    onReset () {
      this.q.cate_id = this.q.state = ''
      //  2-获取文章列表 调用函数
      this.initArtList()
    },
    // 获取文章数据列表
    // 1.封装api请求函数
    // 2.调用函数
    // 3.储存函数
    async initArtList () {
      const res = await getArticleListApi(this.q)
      console.log(res, 555)
      // 储存数据
      this.artList = res.data.data
      this.total = res.data.total
    },
    // 点击删除文章列表
    delArtFn (id) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 点击确定按钮  发送请求
          const res = await delArticleListApi(id)
          console.log(res)
          // 更新页面
          if (res.data.code === 0) {
            this.initArtList()
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消!'
          })
        })
    },

    // 点击文章标题显示详情
    async showInfo (id) {
      // 显示详情
      // 发送请求
      // 展示数据到对话框中
      this.ArtInfoFormVisible = true
      const res = await getArtInfoApi(id)
      console.log(res, 456)
      this.infoData = res.data.data
    },
    /* 发表文章
    1.显示对话框
    2.对话框中布局   并显示分类和校验
    3.图片上传
    4.发布文章-->发布文章按钮+存为草稿
    5.关闭对话框
    6.更新数据
    */
    pubArticle () {
      this.artPubFormVisible = true
    },
    // 当文章发布成功就关闭  发布文章的对话框
    closePubDiaFn () {
      this.artPubFormVisible = false
      // 再重新刷新页面
      this.initArtList()
    }
  }
}
</script>
<style lang='less'  scoped>
.headerBox {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin: 20px 0;
}
.el-pagination {
  text-align: left;
  margin-top: 12px;
}
.preview {
  text-align: left;
}
.pubArtForm {
  text-align: left;
}
</style>
